<!-- pages/bidding/index.vue -->
<template>
  <view class="bidding-page">
    <classifyHead title="参拍上午场" />
    <view class="middle">
      <view class="middle-item">
        <view class="score-name">今天可用竞购积分</view>
        <view class="score-count">0.00</view>
      </view>
      <view style="font-size: 54rpx; margin-top: 10rpx">|</view>
      <view class="middle-item">
        <view class="score-name">上午场已预约积分</view>
        <view class="score-count">0.00</view>
      </view>
    </view>
    <view class="date">
      <image src="https://aocshop.oss-cn-hangzhou.aliyuncs.com/aoc/2025/9/2968da5818e4b0eb7e9b0fec89.png" mode="scaleToFill" />
      <view class="bidding-date">
        <view>{{ statusText }}</view>
        <view style="margin-top: 80rpx">2025年8月18日</view>
        <view>08:00-09:50</view>
        <view v-if="showCountdown">距停止预约: {{ countdown }}</view>
        <view v-else style="color: #999;">{{ statusText }}</view>
      </view>
    </view>
    <view class="content">
      <view class="mall-top">
        <image src="https://aocshop.oss-cn-hangzhou.aliyuncs.com/aoc/2025/9/2968da5b01e4b0eb7e9b0fec8c.png" mode="scaleToFill" />
        <view class="mall-right">
          <view>
            Special 轻奢复古白月光手镯女士镯子饰品外出高级感2025年欧美风
          </view>
          <view class="price">
            销售价:<text style="color: red; text-align: left">500.00</text>
          </view>
          <view class="count">
            <view class="count-btn">
              <button>-</button>
              <button class="number">{{ 1 }}</button>
              <button>+</button>
            </view>
          </view>
        </view>
      </view>
      <!-- 修复：mall-bottom 布局问题 -->
      <view class="mall-bottom">
        <view class="left">
          <view class="mallExist">[上午场] 已预约</view>
          <text class="count">数量:20</text>
          <text class="total">总计:<text style="color: red">5050000.0</text></text>
        </view>
        <!-- 将 button 包在 view 中，避免 flex 布局异常 -->
        <view class="btn-wrapper">
          <button class="mall-btn" @click="handleMask">操作</button>
        </view>
      </view>
    </view>

    <!-- 遮罩层 -->
    <wd-overlay :show="show" @click="show = false">
      <view class="wrapper">
        <view class="block">
          <view class="mall-top" style="padding-bottom: 10rpx; border-bottom: 1px dashed black">
            <image src="https://aocshop.oss-cn-hangzhou.aliyuncs.com/aoc/2025/9/2968da5b01e4b0eb7e9b0fec8c.png" mode="scaleToFill" />
            <view class="mall-right">
              <view>
                Special 轻奢复古白月光手镯女士镯子饰品外出高级感2025年欧美风
              </view>
              <view class="price">
                销售价:<text style="color: red; text-align: left">500.00</text>
              </view>
              <view class="count">
                <view class="count-btn">
                  <button>-</button>
                  <button class="number">{{ 1 }}</button>
                  <button>+</button>
                </view>
              </view>
            </view>
          </view>
          <view class="other-score">
            <view class="score-name">
              <view>数量:</view>
              <view>竟购积分：</view>
              <view>保证金:</view>
            </view>
            <view class="score-number">
              <view style="margin-left: 120rpx; text-align: left">5</view>
              <view style="margin-left: 120rpx; text-align: left">-75</view>
              <view style="margin-left: 120rpx; text-align: left">-1525</view>
            </view>
          </view>
          <view class="score-total">
            <view style="width: 214rpx; text-align: left;">共计：</view>
            <view>-5050</view>
          </view>
          <view class="score-btn">
            <button class="confirm">确认</button>
            <button class="confirmPrev" @click="handleConfirmPrev">确认预约</button>
          </view>
          <view class="other">
            注:保证金当交易成功后退回，若未委托交易不予退回。
          </view>
        </view>
      </view>
    </wd-overlay>
  </view>
</template>

<script setup>
import classifyHead from "@/components/classifyHead.vue";
import { ref, onMounted, onUnmounted } from "vue";

// 控制遮罩显示
const show = ref(false);
const handleMask = () => {
  show.value = true;
};

// 预约页面跳转
const handleConfirmPrev = () => {
  uni.navigateTo({
    url: '/subPackage/biddingArea/reservation'
  });
};

// 倒计时相关
const countdown = ref('00:00:00');
const statusText = ref('预约中');
const showCountdown = ref(true);

// 计算今日 09:50:00 的时间戳
function getEndTime() {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth();
  const date = now.getDate();
  return new Date(year, month, date, 9, 50, 0); // 09:50:00
}

// 计算 08:00:00 的时间戳
function getStartTime() {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth();
  const date = now.getDate();
  return new Date(year, month, date, 8, 0, 0); // 08:00:00
}

// 格式化时间为 HH:MM:SS
function formatTime(seconds) {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  const s = seconds % 60;
  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
}

// 更新倒计时
function updateCountdown() {
  const now = new Date();
  const start = getStartTime();
  const end = getEndTime();

  if (now < start) {
    statusText.value = '预约未开始';
    showCountdown.value = false;
    countdown.value = '00:00:00';
  } else if (now >= start && now <= end) {
    const diff = Math.floor((end - now) / 1000); // 秒
    if (diff <= 0) {
      statusText.value = '预约已结束';
      showCountdown.value = false;
    } else {
      countdown.value = formatTime(diff);
      statusText.value = '预约中';
      showCountdown.value = true;
    }
  } else {
    statusText.value = '预约已结束';
    showCountdown.value = false;
  }
}

// 定时器
let timer = null;

onMounted(() => {
  updateCountdown(); // 立即执行一次
  timer = setInterval(() => {
    updateCountdown();
  }, 1000);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});
</script>

<style lang="scss" scoped>
.bidding-page {
  .middle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: aliceblue;
    .score-name {
      font-size: 33rpx;
      image {
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        margin-left: 12rpx;
      }
    }
    .score-count {
      font-size: 40rpx;
      margin-top: 12rpx;
    }
  }
  .middle {
    background: #9897fe;
    height: 106rpx;
    width: calc(100% - 40rpx);
    display: flex;
    justify-content: space-around;
    padding: 30rpx 20rpx;
  }
  .date {
    width: 100%;
    height: 350rpx;
    position: relative;
    image {
      width: 100%;
      height: 100%;
    }
    .bidding-date {
      color: aliceblue;
      position: absolute;
      top: 80rpx;
      left: 40rpx;
    }
  }
  .mall-top {
    display: flex;
    width: calc(100% - 20rpx);
    height: 227rpx;
    padding: 0 10rpx;
    image {
      width: 194rpx;
      height: 194rpx;
      border-radius: 20rpx;
      margin-top: 20rpx;
    }
    .mall-right {
      flex: 1;
      margin-left: 20rpx;
      margin-top: 20rpx;
      color: black;
      font-weight: 500;
      .price {
        margin-top: 40rpx;
        font-size: 20rpx;
        width: 400rpx;
        color: #999;
        text-align: left;
      }
      .count {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 270rpx;
        .count-btn {
          display: flex;
          button {
            width: 40rpx;
            height: 40rpx;
            background: #ece8e8;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0rpx;
          }
          .number {
            width: 80rpx;
            height: 40rpx;
            background: #ece8e8;
            border-radius: 0rpx;
            margin: 0 10rpx;
            font-size: 20rpx;
          }
        }
      }
    }
  }
  .content {
    margin: 20rpx;
    box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
    width: calc(100% - 40rpx);
    height: 320rpx;
    border-radius: 20rpx;

    .mall-bottom {
      background: #e5e5ff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom-left-radius: 20rpx;
      border-bottom-right-radius: 20rpx;
      height: 94rpx;
      width: 100%;

      .left {
        margin-left: 20rpx;
        color: #999;
        .mallExist {
          width: 150rpx;
          font-size: 20rpx;
        }
        .count {
          font-size: 20rpx;
          width: 300rpx;
        }
        .total {
          width: 200rpx;
          color: #999;
          font-size: 20rpx;
          text-align: center;
          margin-left: 40rpx;
        }
      }

      .btn-wrapper {
        width: 220rpx;
        display: flex;
        justify-content: flex-end;
        padding-right: 10rpx;
      }

      .mall-btn {
        background: red;
        width: 200rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        border-radius: 0rpx;
        font-size: 28rpx;
        padding: 0;
        line-height: 60rpx;
      }
    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 400rpx;
    height: 880rpx;
    width: 100%;
    .block {
      width: calc(100% - 60rpx);
      height: 100%;
      background-color: #fff;
      border-radius: 40rpx;
      margin: 0 20rpx;
      padding: 0 10rpx;
      .other-score {
        margin-top: 20rpx;
        padding-bottom: 10rpx;
        border-bottom: 1px dashed #000;
        display: flex;
        justify-content: space-evenly;
        align-content: center;
        .score-number {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
        }
      }
      .score-total {
        margin-top: 20rpx;
        display: flex;
        justify-content: space-evenly;
        align-content: center;
      }
      .score-btn {
        display: flex;
        justify-content: space-around;
        align-content: center;
        margin-top: 20rpx;
        .confirm,
        .confirmPrev {
          width: 200rpx;
          height: 90rpx;
          color: #fff;
          background: #ccc;
          display: flex;
          justify-content: center;
          align-content: center;
        }
        .confirmPrev {
          background: red;
        }
      }
      .other {
        width: calc(100% - 80rpx);
        text-align: center;
        height: 40rpx;
        margin: 40rpx 44rpx;
      }
    }
  }
}
</style>